<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
	</head>
	<body>
		<center>
			<!-- 
				跳转到id为bottom的元素所在的位置
				直接在href中写 #id属性值
			-->
			<a href="#bottom">去底部</a>
			<a href="#hello">去指定位置</a>
			<h1>这是我的个人博客</h1>
			<hr />
			<h2>东风破</h2>
			<!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 -->
			<a href="#">周杰伦</a>
			
			<p id="hello">
				一盏离愁 孤单伫立在窗口 <br />
				我在门后 假装你人还没走 <br />
				旧地如重游 月圆更寂寞 <br /> 
				夜半清醒的烛火 不忍苛责我 <br />
				一壶漂泊 浪迹天涯难入喉 <br />
				你走之后 酒暖回忆思念瘦<br />
				水向东流 时间怎么偷<br />
				花开就一次成熟 我却错过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				岁月在墙上剥落 看见小时候<br />
				犹记得那年我们都还很年幼<br />
				而如今琴声幽幽 我的等候你没听过<br />
				<img src="1.jpg" alt="图片" width="300px" /> <br />
				谁在用琵琶弹奏 一曲东风破<br />
				枫叶将故事染色 结局我看透<br />
				篱笆外的古道我牵着你走过<br />
				荒烟漫草的年头 就连分手都很沉默<br />
				一壶漂泊 浪迹天涯难入喉<br />
				你走之后 酒暖回忆思念瘦<br />
				水向东流 时间怎么偷<br />
				花开就一次成熟 我却错过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				岁月在墙上剥落 看见小时候<br />
				犹记得那年我们都还很年幼<br />
				而如今琴声幽幽 我的等候你没听过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				枫叶将故事染色 结局我看透<br />
				篱笆外的古道我牵着你走过<br />
				荒烟漫草的年头 就连分手都很沉默<br />
				<img src="2.jpg" alt="图片2" width="300px" /> <br />
				谁在用琵琶弹奏 一曲东风破<br />
				岁月在墙上剥落 看见小时候<br />
				犹记得那年我们都还很年幼<br />
				而如今琴声幽幽 我的等候你没听过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				枫叶将故事染色 结局我看透<br />
				篱笆外的古道我牵着你走过<br />
				荒烟漫草的年头 就连分手都很沉默<br />
			</p>
			
			<hr />
			
			友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br />
			
			<!-- 
				如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
				
				html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
				这个属性就是id，id属性在同一个页面中只能有一个不能重复
			-->
				<a id="bottom" href="#">回到顶部</a> | 
				
				<!-- 
					发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
					href="mailto:邮件地址"
					
					当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
				-->
				
				<a href="mailto:abc@atguigu.com">联系我们</a>
		</center>
		
		
	</body>
</html>
